<template>
  <div class="">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-input placeholder="请输入内容" class="input-with-select" v-model="queryInfo.query" clearable
              @clear="ruseltUser">
              <el-button slot="append" icon="el-icon-search" @click="searchUserReuslt"></el-button>
            </el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <el-button class="keBtn" type="primary" @click="addUser">添加用户</el-button>
        </el-col>
      </el-row>

      <template>
        <el-table :data="userlist" style="width: 100%" stripe border>
          <el-table-column prop="id" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="username" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="email" label="地址">
          </el-table-column>
          <el-table-column prop="mobile" label="地址">
          </el-table-column>
          <el-table-column prop="" label="权限">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.mg_state" @change="changeUserstate(scope.row)">

              </el-switch>
            </template>

          </el-table-column>
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
              <!-- 修改 -->
              <el-button type="primary" icon="el-icon-edit" size='mini' @click="editUsers(scope.row.id)"></el-button>
              <!-- 删除 -->
              <el-button type="danger" icon="el-icon-delete" size='mini'></el-button>
              <!-- 分配角色 -->
              <el-button type="warning" icon="el-icon-setting" size='mini'></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页导航区域 
@size-change(页码每页条数改变时触发) 
@current-change(页码发生改变时触发)
:current-page(设置当前页码)
:page-size(设置每页的数据条数)
:total(设置总页数) -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </template>

    </el-card>
    <el-dialog title="注册用户" :visible.sync="addUserdialogVisible" width="30%" @close="resetUsersDia">
      <el-form ref="addform" :model="addForm" label-width="80px" :rules="addUserRules">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submenuUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog title="修改用户" :visible.sync="editUserdialogVisible" width="30%" @close="resetEditUsersDia">
      <el-form ref="editform" :model="editForm" label-width="80px" :rules="editUserRules">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submenueditUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      //验证邮箱的规则
      var checkEmail = (rule, value, cb) => {
        const regEmail = /^\w+@\w+(\.\w+)+$/
        if (regEmail.test(value)) {
          return cb()
        }
        //返回一个错误提示
        cb(new Error())
      }
      //验证手机号码的规则
      var checkMobile = (rule, value, cb) => {
        const regMobile = /^1[34578]\d{9}$/
        if (regMobile.test(value)) {
          return cb()
        }
        //返回一个错误提示
        cb(new Error('请输入合法的手机号码'))
      }

      return {
        tableData: [{
          date: "10点21分",
          name: "张三",
          address: "哈哈",
        }],
        userlist: [],
        queryInfo: {
          query: "",
          pagenum: 1,
          pagesize: 2,
        },
        total: 0,
        addUserdialogVisible: false,
        editUserdialogVisible: false,
        addForm: {
          username: "",
          password: "",
          email: "",
          phone: "",
        },
        editForm: {
          usernam: '',
          email: '',
          mobile: '',
          id: '',
        },
        editUserRules: {
          email: [{
              required: true,
              message: '请输入邮箱',
              trigger: 'blur'
            },
            {
              validator: checkEmail,
              message: '邮箱格式不正确，请重新输入',
              trigger: 'blur'
            }
          ],
          mobile: [{
              required: true,
              message: '请输入手机号码',
              trigger: 'blur'
            },
            {
              validator: checkMobile,
              message: '手机号码不正确，请重新输入',
              trigger: 'blur'
            }
          ]
        },
        addUserRules: {
          username: [{
              required: true,
              message: '请输入用户名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 10,
              message: '用户名在3~10个字符之间',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 16,
              message: '长度在 6 到 16 个字符',
              trigger: 'change'
            }
          ],
          email: [{
              required: true,
              message: '请输入邮箱',
              trigger: 'blur'
            },
            {
              validator: checkEmail,
              message: '邮箱格式不正确，请重新输入',
              trigger: 'blur'
            }
          ],
          phone: [{
              required: true,
              message: '请输入手机号码',
              trigger: 'blur'
            },
            {
              validator: checkMobile,
              message: '手机号码不正确，请重新输入',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created() {
      this.getUserlist()
    },
    mounted() {},
    watch: {},
    computed: {},
    methods: {
      getUserlist() {
        this.$axios.get("users", {
          params: this.queryInfo
        }).then(val => {

          if (val.meta.status != 200) {
            return this.$message.error("获取用户信息错误")
          }
          this.userlist = val.data.users
          this.total = val.data.total

        })
      },
      handleSizeChange(abc) {
        this.queryInfo.pagesize = abc
        this.getUserlist()
      },
      handleCurrentChange(val) {
        this.queryInfo.pagenum = val
        this.getUserlist()
      },
      changeUserstate(userinfo) {

        this.$axios.put("users/" + userinfo.id + "/state/:type" + userinfo.mg_state).then(val => {
          console.log(val);
          if (val.meta.status != 200) {
            userinfo.mg_state = !userinfo.mg_state
            return this.$message.error("获取用户信息错误")
          }
          this.$message.success("修改成功")
        })
      },
      searchUserReuslt() {
        this.getUserlist()
      },
      ruseltUser() {
        this.getUserlist()
      },
      addUser() {
        this.addUserdialogVisible = true
      },
      resetUsersDia() {
        this.$refs.addform.resetFields();
      },
      submenuUser() {

        this.$refs.addform.validate(vai => {
          console.log(vai);
          if (!vai) {
            return
          }
          this.$axios.post("users", this.addForm).then(vai => {
            console.log(vai.data);
            this.getUserlist()
            this.addUserdialogVisible = false
            this.$message.success("添加成功")
          })
        })
      },
      //   修改用户
       // 打开窗口
      editUsers(id) {
        this.$axios.get('/users/' + id).then(val => {
          if (val.meta.status != 200) {
            return this.$message.error(val.meta.msg);
          }
          this.editForm.username = val.data.username
          this.editForm.email = val.data.email
          this.editForm.mobile = val.data.mobile
          this.editForm.id = val.data.id
        })
        this.editUserdialogVisible = true
      },
      // 重置窗口
      resetEditUsersDia() {
        this.$refs.editform.resetFields();
      },
      // 提交修改
      submenueditUser() {
        this.$refs.editform.validate(vai => {
          if (!vai) {
            return
          };
          this.$axios.put('users/' + this.editForm.id, {
            email: this.editForm.email,
            mobile: this.editForm.mobile,
          }).then(val => {
            if (val.meta.status != 200) {
              return this.$message.error(val.meta.msg)
            }
            this.$message.success("修改成功")
            this.editUserdialogVisible = false
            this.getUserlist()
          })
        })
      },
    },
  }
</script>
<style lang="css" scoped>
  .el-card {
    margin: 15px 0;
  }

  .el-menu {
    border-right: none;
    /* background-color: orangered; */
  }
</style>